<template>
	<view class="cd-goods">
		<!-- 后退一页 -->
		<u-back-top :scrollTop="scrollTop" mode="circle" icon="home" z-index="9" top="0" @tap="back">
		</u-back-top>
		<!-- 商品详情页 -->
		<view class="cd-goods-wrap">
			<!-- 轮播图 -->
			<swiper class="cd-goods-swiper" circular current="true" indicator-dots autoplay>
				<swiper-item v-for="(item,index) in gallery" :key="index" style="height: 750rpx;">
					<image class="cd-goods-swiper-img" :src="item.img_url" mode="widthFix"></image>
				</swiper-item>
			</swiper>
			<!-- 售后服务 -->
			<view class="cd-goods-service">
				<u-row>
					<u-col span="4" align="center">
						<u-icon name="checkmark-circle-fill" label="30天无忧退货" labelSize="13" color="#8b0000" size="14"
							width="14" height="14"></u-icon>
					</u-col>
					<u-col span="4" align="center">
						<u-icon name="rmb-circle-fill" label="48小时快速退款" labelSize="13" color="#8b0000" size="14"
							width="14" height="14"></u-icon>
					</u-col>
					<u-col span="4" align="center">
						<u-icon name="email-fill" label="满88元免邮费" labelSize="13" color="#8b0000" size="14" width="14"
							height="14">
						</u-icon>
					</u-col>
				</u-row>
			</view>
			<!-- 商品信息 -->
			<view class="cd-goods-info">
				<view class="cd-goods-info-name">{{info.name}}</view>
				<view class="cd-goods-info-goods_brief">{{info.goods_brief}}</view>
				<view class="cd-goods-info-retail_price">{{info.retail_price | toPrice}}</view>
			</view>
			<!-- 弹出层按钮 -->
			<view class="cd-popup-wrap">
				<view class="cd-goods-popup-btn" @tap="show=true">
					<view class="cd-goods-popup-btn-show">展示弹出层</view>
					<u-icon name="arrow-right" color="#9699a6" size="24"></u-icon>
				</view>
			</view>
			<!-- 弹出层 -->
			<u-popup :show="show" mode="bottom" @close="show=false">
				<view class="cd-goods-popup-info">
					<image class="cd-goods-popup-info-img" :src="info.list_pic_url" mode="widthFix"></image>
					<view class="cd-goods-popup-info-text">
						<text class="cd-goods-popup-info-price">价格：{{info.retail_price | toPrice}}</text>
						<text class="cd-goods-popup-info-num">库存：{{info.goods_number}}</text>
					</view>
				</view>
				<view class="cd-goods-popup-step">
					数量：
					<u-number-box></u-number-box>
				</view>
				<!-- 添加购物车数量 -->
				<!-- （要把购物车的数量添加上，用接口 /cart/goodscount） -->
				<uni-goods-nav :fill="true" :buttonGroup="buttonGroup" :options="options" @click="onClick"
					@buttonClick="buttonClick" />
			</u-popup>
			<!-- 商品参数 -->
			<view class="cd-goods-params">
				<view class="cd-goods-title">商品参数</view>
				<view class="cd-goods-attr" v-for="(item,index) in attribute" :key="index">
					<text class="cd-goods-attr-name">{{item.name}}</text>
					<text class="cd-goods-attr-value"> {{item.value}}</text>
				</view>
			</view>
			<!-- 商品html标签 -->
			<rich-text :nodes="info.goods_desc"></rich-text>
			<!-- 常见问题 -->
			<view class="cd-issue-wrap">
				<view class="cd-title-box">
					<view class="cd-title-line"></view>
					<view class="cd-title">常见问题</view>
				</view>
				<view class="cd-issue-item" v-for="(item,index) in issue" :key="index">
					<view class="cd-issue-item-question">{{item.question}}</view>
					<view class="cd-issue-item-answer">{{item.answer}}</view>
				</view>
			</view>
			<!-- 相关产品 -->
			<view class="cd-goodsList">
				<view class="cd-title-box">
					<view class="cd-title-line"></view>
					<view class="cd-title">相关产品</view>
				</view>
				<mylist :list="goodsList"></mylist>
			</view>
			<!-- 加入购物车 -->
			<view class="cd-cart-wrap">
				<uni-goods-nav :fill="true" :buttonGroup="buttonGroup" :options="options" @click="onClick"
					@buttonClick="buttonClick " />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ApiGoodsLhx,
		ApiDetailLhx,
		ApiRelatedLhx
	} from '@/utils/api.js'
	import pageBack from '@/components/pageBack/pageBack.vue'
	import mylist from '@/components/mylist/mylist.vue'
	export default {
		data() {
			return {
				gallery: [], //轮播图
				info: {}, //产品信息
				show: false, //是否显示弹出层
				attribute: [], //产品参数
				issue: [], //常见问题
				goodsList: [], //相关产品
				scrollTop: 0,
				// 购物车
				options: [{
					icon: 'star',
					text: '收藏'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '立即购买',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '加入购物车',
						backgroundColor: '#ffa200',
						color: '#fff',
					}
				]
			}
		},
		components: {
			pageBack,
			mylist
		},
		methods: {
			onClick(e) {
				console.log(e)
				if (e.content.text == '购物车') {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			// 添加购物车数量明天做！！
			buttonClick(e) {
				if (e.content.text == '加入购物车') {
					this.show = true
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onLoad(option) {
			// 相关产品（商品）
			let resGoods = await ApiGoodsLhx({
				brandId: option.id,
				page: 1,
				size: 1000
			})

			// 产品明细
			let resDetai = await ApiDetailLhx({
				id: option.id
			})
			// console.log(resDetai)
			let {
				gallery: gallery,
				info: info,
				attribute: attribute,
				issue: issue,
			} = resDetai.data
			this.gallery = gallery
			this.info = info
			this.attribute = attribute
			this.issue = issue

			// 调整info的样式
			info.goods_desc = info.goods_desc.replace(/<img/g, "<img style='display: block; width: 100%;'")

			// 相关产品
			let resRelated = await ApiRelatedLhx({
				id: option.id
			})
			// console.log(resRelated)
			this.goodsList = resRelated.data.goodsList
		}
	}
</script>

<style lang="scss">
	.cd-goods {
		background-color: #efefef;
	}

	// 轮播图
	.cd-goods-swiper {
		width: 750rpx;
		height: 750rpx;

		.cd-goods-swiper-img {
			width: 750rpx;
			height: 750rpx;
		}
	}

	// 售后服务
	.cd-goods-service {
		height: 60rpx;
		background-color: #efefef;



		.u-icon--right {
			height: 60rpx;
		}
	}

	// 商品信息
	.cd-goods-info {
		padding: 40rpx 0;
		height: 242rpx;
		border-bottom: 1px solid #cccccc;
		background-color: white;

		.cd-goods-info-name {
			font-size: 40rpx;
			display: flex;
			justify-content: center;
			height: 80rpx;
			align-items: center;
		}

		.cd-goods-info-goods_brief {
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			height: 80rpx;
			align-items: center;
		}

		.cd-goods-info-retail_price {
			height: 80rpx;
			color: var(--price-color);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	// 弹出层按钮
	.cd-popup-wrap {
		.cd-goods-popup-btn {
			height: 48rpx;
			padding: 20rpx 32rpx;
			margin-bottom: 40rpx;
			display: flex;
			background-color: white;

			.cd-goods-popup-btn-show {
				flex: 1;
			}
		}
	}

	// 弹出层
	.u-slide-up-enter-to {

		.cd-goods-popup-info {
			display: flex;
			height: 200rpx;
			margin-top: 40rpx;

			.cd-goods-popup-info-img {
				width: 200rpx;
			}

			.cd-goods-popup-info-text {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

			}
		}

		.cd-goods-popup-step {
			font-size: 36rpx;
			padding: 0 30rpx;
			margin: 40rpx 0;

			.u-number-box {
				padding: 40rpx 0;
			}
		}
	}

	// 产品信息
	.cd-goods-params {
		background-color: white;
		padding: 20rpx;

		.cd-goods-title {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			font-size: 40rpx;
			line-height: 40rpx;
		}

		.cd-goods-attr {
			display: flex;
			background-color: #efefef;
			margin: 12rpx 0;
			font-size: 20rpx;
			height: 60rpx;
			align-items: center;
			padding-left: 20rpx;
			justify-content: center;

			.cd-goods-attr-name {
				color: #a39eaa;
				margin-right: 10rpx;
				text-align: right;
				width: 25vw;
			}

			.cd-goods-attr-value {
				flex: 1;
				white-space: nowrap;
			}
		}
	}

	// 标题
	.cd-title-box {
		width: 100%;
		height: 40px;
		position: relative;
		font-size: 18px;
		background: #fff;

		.cd-title-line {
			width: 50%;
			height: 2px;
			background: #ccc;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}

		.cd-title {
			width: 30%;
			height: 40px;
			background: #fff;
			position: absolute;
			text-align: center;
			line-height: 40px;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
	}

	// 常见问题
	.cd-issue-wrap {
		background-color: white;
		margin-top: 60rpx;
		padding-bottom: 40rpx;

		.cd-issue-item {
			height: 136rpx;

			.cd-issue-item-question {
				&::before {
					content: "";
					width: 4px;
					height: 4px;
					background: darkred;
					border-radius: 50%;
					position: absolute;
					left: 8px;
					top: 50%;
					margin-top: -2px;
				}

				padding-left: 20px;
				height: 40px;
				line-height: 40px;
				font-size: 32rpx;
				position: relative;
				padding-right: 10px;
			}

			.cd-issue-item-answer {
				padding-left: 20px;
				padding-right: 10px;
				color: #666;
				font-size: 20rpx;
			}
		}
	}

	// 加入购物车
	.cd-cart-wrap {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
	}
</style>
